<p>
  <!-- #region -->
  <!--[(ngModel)]='expression'-->
  <!-- #endregion -->
  <app-test-detail [user]="user"></app-test-detail>
</p>
  <!-- #region -->
  
  <!-- #endregion -->
  <table border="1px" style="border-collapse:collapse;border-color:#444;width: 80%;">
    <thead>
      <td width="40px">order</td>
      <td width="60px">id</td>
      <td>name</td>
      <td width="60px">record</td>
      <td width="120px">operation</td>
    </thead>
    <tr *ngFor="let usr of users; let i = index" [class.selected]="usr === selectedUser" (click)="onSelect(usr)">
        <td>{{i + 1}}</td>
      <td>{{usr.id}}</td>
      <td>{{usr.name}}</td>
      <td>{{usr.record}}</td>
      <td>
        <nav>
          <a routerLink="/detail/{{usr.id}}"> view
          </a>
          <a href="javascript:void(0)" (click)="deleteUser(usr)">delete</a>
        </nav>
      </td>
    </tr>
  </table>
  <div *ngIf="selectedUser">
      <app-test-detail [user]="selectedUser" preffix="The selected user" (dataLoaded)="detaileLoad()" appSpy></app-test-detail>
  </div>
  <button (click)="test($event)">test</button>&nbsp;{{currentDate}}
  <form #myform="ngForm" (ngSubmit)="submitForm(myform)">
      <div class="form-group">
        <label for="id">id</label>
        <input type="text" class="form-control" name="id" required [(ngModel)]="user.id" #id>
        <span>{{id.className}}</span>
      </div>
 
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" name="name" [(ngModel)]="user.name" #name>
        <span>{{name.className}}</span>
      </div>
 
      <button type="submit" class="btn btn-success" [disabled]="!myform.form.valid">Submit</button>
 
    </form>